<template>
  <div ref="threeContainer" class="three-container"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default defineComponent({
  name: 'PowerPlant3D',
  setup() {
    const threeContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (!threeContainer.value) return;

      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, threeContainer.value.clientWidth / threeContainer.value.clientHeight, 0.1, 1000);
      camera.position.z = 10;

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(threeContainer.value.clientWidth, threeContainer.value.clientHeight);
      threeContainer.value.appendChild(renderer.domElement);

      // 添加轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.update();

      // 创建厂房（长方体）
      const buildingGeometry = new THREE.BoxGeometry(4, 2, 4);
      const buildingTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/crate.gif');
      const buildingMaterial = new THREE.MeshBasicMaterial({ map: buildingTexture });
      const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
      scene.add(building);

      // 创建凉水塔（圆柱体）
      const coolingTowerGeometry = new THREE.CylinderGeometry(1, 1, 6, 32);
      const coolingTowerTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/brick_diffuse.jpg');
      const coolingTowerMaterial = new THREE.MeshBasicMaterial({ map: coolingTowerTexture });
      const coolingTower = new THREE.Mesh(coolingTowerGeometry, coolingTowerMaterial);
      coolingTower.position.set(5, 3, 0);
      scene.add(coolingTower);

      // 创建烟囱（圆柱体）
      const chimneyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 4, 32);
      const chimneyMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
      const chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
      chimney.position.set(5, 6.5, 0);
      scene.add(chimney);

      // 添加光源
      const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
      scene.add(ambientLight);

      const pointLight = new THREE.PointLight(0xffffff, 1, 100);
      pointLight.position.set(10, 10, 10);
      scene.add(pointLight);

      // 渲染循环
      const animate = function () {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      };

      animate();

      // 处理窗口大小变化
      window.addEventListener('resize', () => {
        camera.aspect = threeContainer.value!.clientWidth / threeContainer.value!.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(threeContainer.value!.clientWidth, threeContainer.value!.clientHeight);
      });
    });

    return {
      threeContainer,
    };
  },
});
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
}
</style>
